<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="contestPath" value="<%=request.getContextPath()%>"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<title>科目列表</title>
		<style>
			.modal-body span{
				max-width: 580px;
				word-wrap: break-word;
			}
			.modal-body label {
				width: 120px;
				text-align: left;
				margin: 0 10px 0 10px;
			}
			#subjectStudentModal .checkbox .lbl{
				float: left;
				width: 100px;
			}
		</style>
		<script type="text/javascript">
		$(function(){

			$('.subject-status').click(function(){
				var subId = $(this).attr("subId");
				$.ajax({
					type: 'POST',
					url: '${contestPath}/teacher/subjectEditStatus',
					data: {
						subId: subId,
					},
					dataType: "json",
					success: function(data){
						var messageMap = data.messageMap;
						if(data.success){
							alert(messageMap['message']);
							window.location.reload();
						}else{
							alert('状态修改失败！' + messageMap['message']);
						}
					}
				});
			});
			
			$("#addSubjectBtn").click(function(){
				$('#addSubjectFrom .status').val('0');
				$('#addSubjectModal').modal('show');
			});
			
			$('#addSubjectSaveBtn').click(function(){
				//if($('#addTestForm').valid()){
					var name = $('#addSubjectFrom input[name="name"]').val();
					var description = $('#addSubjectFrom input[name="description"]').val();
					var testCount = $('#addSubjectFrom input[name="testCount"]').val();
					var totalTime = $('#addSubjectFrom input[name="totalTime"]').val();
					var totalScore = $('#addSubjectFrom input[name="totalScore"]').val();
					var status = $('#addSubjectFrom input[name="status"]:radio:checked').val();
					$.ajax({
						type: 'POST',
						url: '${contestPath}/subjectAdd',
						data: {
							name: name,
							description: description,
							testCount: testCount,
							totalTime: totalTime,
							totalScore: totalScore,
							status: status
						},
						dataType: "json",
						success: function(data){
							if(data.success){
								alert('添加成功！');
								window.location.reload();
							}else{
								var messageMap = data.messageMap;
								for(var key in messageMap){
									var value = messageMap[key];
									$('#addSubjectFrom input[name="' + key + '"]').after('<label class"jsr303-message-label">' + value + '</label>');
								}
								alert('添加失败！' + messageMap['message']);
							}
						}
					});
				//}
			});

			$(".edit-subject").click(function(){
				var subId = $(this).val();
				$.ajax({
					type: "POST",
					url: "${contestPath}/getSubjectById",
					data: {
						subId: subId
					},
					dataType: "json",
					success: function(data){
						$('#editSubjectFrom input[name="subId"]').val(subId);
						$('#editSubjectFrom input[name="name"]').val(data.name);
						$('#editSubjectFrom input[name="description"]').val(data.description);
						$('#editSubjectFrom input[name="testCount"]').val(data.testCount);
						$('#editSubjectFrom input[name="totalTime"]').val(data.totalTime);
						$('#editSubjectFrom input[name="totalScore"]').val(data.totalScore);
						if(data.status == '1'){
							$('#editSubjectFrom input:radio[value="1"]').attr('checked',true);
						}
					}
				});
				
				$('#editSubjectModal').modal('show');
			});

			$('#editSubjectUpdateBtn').click(function(){
				//if($('#addTestForm').valid()){
					var subId = $('#editSubjectFrom input[name="subId"]').val();
					var name = $('#editSubjectFrom input[name="name"]').val();
					var description = $('#editSubjectFrom input[name="description"]').val();
					var testCount = $('#editSubjectFrom input[name="testCount"]').val();
					var totalTime = $('#editSubjectFrom input[name="totalTime"]').val();
					var totalScore = $('#editSubjectFrom input[name="totalScore"]').val();
					var status = $('#editSubjectFrom input[name="status"]:radio:checked').val();
					$.ajax({
						type: 'POST',
						url: '${contestPath}/subjectEdit',
						data: {
							subId:subId,
							name: name,
							description: description,
							testCount: testCount,
							totalTime: totalTime,
							totalScore: totalScore,
							status: status
						},
						dataType: "json",
						success: function(data){
							if(data.success){
								alert('修改成功！');
								window.location.reload();
							}else{
								var messageMap = data.messageMap;
								for(var key in messageMap){
									var value = messageMap[key];
									$('#editSubjectFrom input[name="' + key + '"]').after('<label class"jsr303-message-label">' + value + '</label>');
								}
								alert('修改失败！' + messageMap['message']);
							}
						}
					});
				//}
			});
			
			$(".delete-subject").click(function(){
				var subId = $(this).val();
				if(confirm("是否确认删除？")){
					$.ajax({
						type: 'POST',
						url: '${contestPath}/deleteSubject',
						data: {
							subId: subId,
						},
						dataType: "json",
						success: function(data){
							if(data.success){
								alert('删除成功！');
								window.location.reload();
							}else{
								var messageMap = data.messageMap;
								alert('删除失败！' + messageMap['message']);
							}
						}
					});
				}else{
					return;
				}
			});

			$('.manage-subject-student-btn').click(function(){
				var subId = $(this).val();
				$.ajax({
					type: 'POST',
					url: '${contestPath}/teacher/getAllStudent',
					data: {
						subId: subId,
					},
					dataType: "json",
					success: function(data){
						var htmlString = '';
						var selectedUser = data.selectedUser;
						for(var i = 0; i < data.allUser.length; i++){
							var user = data.allUser[i];
							var checked = checkSelectedUser(selectedUser, user.id) ? ' checked="checked" ' : '';
							htmlString += '<div class="checkbox">';
							htmlString += '		<label>';
							htmlString += '			<input name="subjectStudents" class="ace ace-checkbox-2" type="checkbox" value="'
													+ user.id + '" ' + checked + ' />';
							htmlString += '			<span class="lbl">' + user.name + '</span>';
							htmlString += '		</label>';
							htmlString += '</div>';
						}
						$('#subjectStudentContent').html(htmlString);
						$('#subjectId').val(subId);
					}
				});
				$('#modalSubjectName').text($(this).parents("td").siblings("td").eq(3).text());
				$('#subjectStudentModal').modal('show');
			});

			var checkSelectedUser = function(selectedUser, userId){
				var falg = false;
				$.each(selectedUser, function(index, item){
					if(item == userId){
						falg = true;
					}
				});
				return falg;
			};

			$('#subjectStudentSaveBtn').on('click', function(){
				var subjectStudents = [];
				var l = $('input[name="subjectStudents"]:checked').length;
				if(l > 0){
					for(var i = 0; i < l; i++){
						subjectStudents[i] = $($('input[name="subjectStudents"]:checked')[i]).val();
					}
				}else{
					subjectStudents[0] = '';
				}
				$.ajax({
					type: 'POST',
					url: '${contestPath}/teacher/saveSubjectStudent',
					data: {
						subjectStudents: subjectStudents,
						subId:$('#subjectId').val()
					},
					dataType: "json",
					success: function(data){
						if(data.success){
							alert('成功！');
							window.location.reload();
						}else{
							alert('失败！');
						}
					}
				});
			});
		});
		</script>
	</head>

	<body>
		<div id="messageDiv">
			<c:if test="${not empty message }">
				<script type="text/javascript">
					alert("${message}");
				</script>
			</c:if>
		</div>
		
		<!-- 添加科目-模态框（Modal） -->
		<div class="modal fade" id="addSubjectModal" tabindex="-1" role="dialog" aria-labelledby="addSubjectModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content" style="width:400px;margin:auto">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="addSubjectModalLabel"><spring:message code="subject.add.message"/></h4>
		            </div>
		            <div class="modal-body">
		            	<form id="addSubjectFrom" method="post">
		            	<p><label><spring:message code="subject.name.message"/>:</label><input type="text" name="name"></p>
		            	<p><label><spring:message code="subject.description.message"/>:</label><input type="text" name="description"></p>
		            	<p><label><spring:message code="subject.testCount.message"/>:</label><input type="text" name="testCount"></p>
		            	<p><label><spring:message code="subject.totalTime.message"/>:</label><input type="text" name="totalTime"></p>
		            	<p><label><spring:message code="subject.totalScore.message"/>:</label><input type="text" name="totalScore"></p>
		            	<p><label><spring:message code="subject.status.message"/>:</label><input type="radio" name="status" value="0" checked/><spring:message code="subject.close.message"/>&nbsp;&nbsp;<input type="radio" name="status" value="1"/><spring:message code="subject.open.message"/></p>
		            	</form>
					</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="subject.close.message"/></button>
		                <button id="addSubjectSaveBtn" type="button" class="btn btn-primary"><spring:message code="subject.preservation.message"/></button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		
		<!-- 修改科目-模态框（Modal） -->
		<div class="modal fade" id="editSubjectModal" tabindex="-1" role="dialog" aria-labelledby="editSubjectModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content" style="width:400px;margin:auto">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="editSubjectModalLabel"><spring:message code="subject.edit.message"/></h4>
		            </div>
		            <div class="modal-body">
		            	<form id="editSubjectFrom" method="post">
		            	<p><label><spring:message code="subject.name.message"/>:</label><input type="text" name="name"></p>
		            	<p><label><spring:message code="subject.description.message"/>:</label><input type="text" name="description"></p>
		            	<p><label><spring:message code="subject.testCount.message"/>:</label><input type="text" name="testCount"></p>
		            	<p><label><spring:message code="subject.totalTime.message"/>:</label><input type="text" name="totalTime"></p>
		            	<p><label><spring:message code="subject.totalScore.message"/>:</label><input type="text" name="totalScore"></p>
		            	<p><label><spring:message code="subject.status.message"/>:</label><input type="radio" name="status" value="0" checked/><spring:message code="subject.close.message"/>&nbsp;&nbsp;<input type="radio" name="status" value="1"/><spring:message code="subject.open.message"/></p>
		            	<p><input type="hidden" name="subId" ></p>
		            	</form>
					</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="subject.close.message"/></button>
		                <button id="editSubjectUpdateBtn" type="button" class="btn btn-primary"><spring:message code="subject.preservation.message"/></button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		
		<!-- 管理学生-模态框（Modal） -->
		<div class="modal fade" id="subjectStudentModal" tabindex="-1" role="dialog" aria-labelledby="subjectStudentModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content" style="width:400px;margin:auto">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="subjectStudentModalLabel">
		               	 	管理学生科目:<label id="modalSubjectName"></label>
		               	 </h4>
		            </div>
		            <div class="modal-body">
		            	<input type="hidden" id="subjectId" />
		            	<div id="subjectStudentContent" class="control-group">
		            	</div>
					</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="subject.close.message"/></button>
		                <button id="subjectStudentSaveBtn" type="button" class="btn btn-primary"><spring:message code="subject.preservation.message"/></button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		
		<div class="page-content-area">
			<div class="page-header">
				<a href="subjectChangeLocale?localeType=en_US"><button type="button" class="btn btn-xs btn-default"><spring:message code="page.subject.index.english"/></button></a>
				<a href="subjectChangeLocale?localeType=zh_CN"><button type="button" class="btn btn-xs btn-default"><spring:message code="page.subject.index.chinese"/></button></a>
			</div><!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">
							<table id="sample-table-1" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th width=50>
											<button id="addSubjectBtn" type="button" class="btn btn-xs btn-success">
			                                	<i class="ace-icon fa fa-plus bigger-120"></i>
			                                </button>
		                                </th>
										<th class="center">
											<label class="position-relative">
												<input type="checkbox" class="ace" />
												<span class="lbl"></span>
											</label>
										</th>
                                                 <th><spring:message code="subject.id.message"/></th>
									    <th><spring:message code="subject.name.message"/></th>
									    <th><spring:message code="subject.description.message"/></th>
									    <th><spring:message code="subject.testCount.message"/></th>
									    <th><spring:message code="subject.totalTime.message"/></th>
									    <th><spring:message code="subject.totalScore.message"/></th>
									    <th><spring:message code="subject.status.message"/></th>
									    <th><spring:message code="subject.action.message"/></th>
                                         	</tr>
								</thead>

								<tbody>
                                         <c:forEach items="${subjectList }" var="subject">
                                             <tr>
                                             		<td></td>
                                                     <td class="center">
                                                         <label class="position-relative">
                                                             <input type="checkbox" class="ace" />
                                                             <span class="lbl"></span>
                                                         </label>
                                                     </td>
                                                     <td>${subject.subId }</td>
                                                     <td>${subject.name }</td>
                                                     <td>${subject.description }</td>
                                                     <td>${subject.testCount }</td>
                                                     <td>${subject.totalTime }</td>
                                                     <td>${subject.totalScore }</td>
                                                     <td>
                                                     	<c:choose>
                                                     		<c:when test="${subject.status == 0 }">
                                                     			<input name="switch-field-1" subId="${subject.subId }" class="ace ace-switch ace-switch-6 subject-status" type="checkbox">
                                                     			<span class="lbl"></span>
                                                     		</c:when>
                                                     		<c:otherwise>
                                                     			<input name="switch-field-1" subId="${subject.subId }" checked class="ace ace-switch ace-switch-6 subject-status" type="checkbox">
                                                     			<span class="lbl"></span>
                                                     		</c:otherwise>
                                                     	</c:choose>
                                                     </td>
										<td>
											<button class="btn btn-xs btn-info edit-subject" value="${subject.subId }">
												<i class="ace-icon fa fa-pencil bigger-120"></i>
											</button>

											<button class="btn btn-xs btn-danger delete-subject" value="${subject.subId }">
												<i class="ace-icon fa fa-trash-o bigger-120"></i>
											</button>
											
											<button class="btn btn-xs btn-info manage-subject-student-btn" value="${subject.subId }">
												<i class="ace-icon fa fa-users bigger-120"></i>
											</button>
										</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
						</div><!-- /.span -->
					</div><!-- /.row -->

					<div class="hr hr-18 dotted hr-double"></div>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content-area -->
	</body>
</html>
